<template>
	<view class="content">
		<view class="content_cover" v-if="detal">
			<image style="width: 100%;" :src="detal.image" mode=""></image>
			<view class="content_cover_tit">
				<view>{{detal.title}}</view>
				<view v-if="LiveImage">{{detal.photo_num}}张照片&nbsp;&nbsp;&nbsp; {{detal.browse}}次直播浏览</view>
			</view>
		</view>
		<view class="head-nav">
			<view v-for="(item,index) in list" :key="index" :class="Inv==index?'activite':''"
				@click="changeList(index)">
				{{item.name}}
			</view>
			<view>
				热门
			</view>
		</view>
		<view class="content_photo" v-if="Inv==0">
			<view class="head-nav">
				<view v-for="(item,index) in LiveImage" :key="index" :class="Invs==index?'activite':''"
					@click="changePhoto(index)">
					{{item.title}}
				</view>
			</view>

			<view class="content_photo_box">
				<view class="pubuBox">
							<view class="pubuItem">
								<view class="item-masonry" v-for="(item, index) in LiveImages" :key="index">
									<image :src="item" lazy-load :lazy-load-margin="0" @click="showBigImg(item)" mode="widthFix"></image>
								</view>
							</view>
						</view>
			
				
				
				<!-- <view class="container">
					<view class="left">
						<image v-for="(item,index) in leftList" lazy-load :lazy-load-margin="0" :key="index" :src="item" alt="" mode="widthFix"
							@click="showBigImg(item)">
						</image>
					</view>
					<view class="right">
						<image v-for="(item,index) in rightList" lazy-load :lazy-load-margin="0" :key="index" :src="item" alt="" mode="widthFix"
							@click="showBigImg(item)">
						</image>
					</view>
				</view> -->
			</view>
		</view>
		<view class="content_video" v-if="Inv==1">
			<view v-for="(item, index) in LiveVideo" :key="index">
				<video :src="item.url" :id="'videoId'+index" @play="play(index)"
					@fullscreenchange="fullscreenchange(e,index)" controls></video>
			</view>

		</view>

	</view>
</template>

<script>
	import {
		API_URL
	} from '@/env'
	export default {
		data() {
			return {
				list: [{
					index: 0,
					name: '照片'
				}, {
					index: 1,
					name: '视频'
				}],
				LiveImage: [],
				LiveImages: [],
				LiveVideo: [],
				Inv: 0,
				Invs: 0,
				videoplay: false, //通过是否播放控制播放盒子显示隐藏
				videoUrl: "", //全屏播放视频的URL } 

				leftList: [],
				rightList: [],
				// 初始化左右盒子高度
				leftH: 0,
				rightH: 0,
				id: '',
				detal: null
			}
		},
		onLoad(options) {
			this.id = options.id

			this.getLiveDetail()
			this.getLiveImage()
		},
		onReady() {
			this.videoContext = uni.createVideoContext("myvideo", this);
			// this这个是实例对象 必传 
		},
		methods: {
			changeList(index) {
				let that = this
				that.Inv = index;
				if (index == 0) {
					that.getLiveImage()
				} else {
					that.getLiveVideo()
				}
			},
			changePhoto(index) {
				let that = this
				that.Invs = index;
				that.getLiveImage()
			},
			getLiveDetail() {

				let that = this
				that.$http('live.liveDetail', {
					id: this.id
				}, '加载中...').then(res => {
					console.log(res)
					if (res.code == 1) {
						this.detal = res.data
					}
				})
			},
			getLiveImage() {
				let that = this
				that.$http('live.liveImage', {
					id: this.id
				}, '加载中...').then(res => {
					if (res.code == 1) {
						that.LiveImage = res.data
						that.LiveImages = res.data[that.Invs].images
						that.LiveImages.forEach(e => {
							uni.getImageInfo({
								src: e,
								success: (image) => {
									let showH = (50 * image.height) / image.width
									if (that.leftH <= that.rightH) {
										that.leftList.push(e)
										that.leftH += showH
									} else {
										that.rightList.push(e)
										that.rightH += showH
									}
								}
							})
						})
					}
				})
			},
			getLiveVideo() {
				let that = this
				that.$http('live.liveVideo', {
					id: that.id
				}, '加载中...').then(res => {
					if (res.code == 1) {
						that.LiveVideo = res.data
					}
				})

			},

			showBigImg(url) {
				let imgsArray = [];
				imgsArray[0] = url
				uni.previewImage({
					current: 0,
					urls: imgsArray,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: res => {
							console.log('选中了第' + (res.tapIndex + 1) + '个按钮,第' + (res.index + 1) +
								'张图片')
						},
						fail: err => {
							console.log(err.errMsg)
						}
					}
				});
			},
			// 播放时进入全屏
			play(index) {
				let videoContext = uni.createVideoContext('videoId' + index, this)
				videoContext.requestFullScreen()
			},
			//退出全屏时停止
			fullscreenchange(e) {
				if (!e.detail.fullScreen) {
					this.videoContext.stop()
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.u-scroll-box {
		flex-direction: row
	}

	.head-nav {
		margin: 40rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;

	}

	.activite {
		color: #00C6C4;
		border-bottom: 4rpx solid #00C6C4;
	}

	.head-nav>view {
		padding-bottom: 10rpx;
		margin-right: 30rpx;
	}


	.content_photo {
		&_box {
			padding: 20rpx;

		}

		.head-nav {
			margin: 30rpx 30rpx 10rpx 30rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;

		}

		.activite {
			color: #fff;
			border: none;
			background: #00C6C4;
			border-radius: 30px;
			padding: 5rpx 20rpx;
		}

		.head-nav>view {
			padding-bottom: 10rpx;
			margin-right: 30rpx;
		}

	}

	page {
		background-color: #F2F2F2;
	}

	.demo-warter {
		margin: 5px;
		position: relative;
	}



	.content_cover {
		&_tit {
			padding: 30rpx;
			background: #F2F2F2;
			view:nth-child(1){
				font-weight: bold;
			}
			view:nth-child(2){
				color: #aaa;
			}
		}
	}

	.container {
		font-size: 14rpx;
		line-height: 24rpx;
	}

	.right,
	.left {
		display: inline-block;
		width: 49%;
		vertical-align: top;
	}

	.left {
		margin-right: 2%;
	}

	.left image,
	.right image {
		width: 100%;
		margin-bottom: 10rpx;
	}

	.content_video {
		text-align: center;

		video {
			border-radius: 20rpx;
			width: 80%;
			margin: 30rpx auto;
		}
	}
	
	.pubuBox {
			padding: 22rpx;
		}
	
		.pubuItem {
			column-count: 2;
			column-gap: 20rpx;
		}
	
		.item-masonry {
			box-sizing: border-box;
			overflow: hidden;
			break-inside: avoid;
			/*避免在元素内部插入分页符*/
			box-sizing: border-box;
			margin-bottom: 10rpx;
		}
	
		.item-masonry image {
			width: 100%;
		}
	
		.listtitle {
			padding-left: 22rpx;
			font-size: 24rpx;
			padding-bottom: 22rpx;
	
			.listtitle1 {
				line-height: 39rpx;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				-webkit-box-orient: vertical;
				min-height: 39rpx;
				max-height: 78rpx;
			}
	
			.listtitle2 {
				color: #ff0000;
				font-size: 32rpx;
				line-height: 32rpx;
				font-weight: bold;
				padding-top: 22rpx;
	
				.listtitle2son {
					font-size: 32rpx;
				}
			}
	
			.listtitle3 {
				font-size: 28rpx;
				color: #909399;
				line-height: 32rpx;
				padding-top: 22rpx;
			}
		}
	
		.Index {
			width: 100%;
			height: 100%;
		}
	
</style>